<script setup>
import {getCurrentInstance, reactive, ref} from "vue";
import {cloneDeep} from "lodash";
import {dictToArray} from "@/utils/utils";
import {dictTypeListClass} from "@/enum/enum";
import {addDictData, getDictData, updateDictData} from "@/api/system/dict_data";

const {proxy} = getCurrentInstance();
const emit = defineEmits(['success']);
const modalRef = ref();
const formRef = ref();
const formData = ref({
  dictDataId: undefined,
  dictDataSort: 0,
  dictDataName: '',
  dictDataValue: '',
  dictType: '',
  cssClass: '',
  listClass: 'default',
  remark: ''
})
const listClassList = dictToArray(dictTypeListClass)
const rules = reactive({
  dictType: [{required: true, message: '请输入字典名称', trigger: 'blur'}],
  dictDataName: [{required: true, message: '请输入数据标签', trigger: 'blur'}],
  dictDataValue: [{required: true, message: '请输入数据键值', trigger: 'blur'}],
  dictDataSort: [{required: true, message: '请输入排序值', trigger: 'blur'}]
})
const formType = ref('create')


const open = async (id, type = 'create', dictCode = '') => {
  formType.value = type;
  resetForm();
  if (type === 'update') {
    const {data} = await getDictData(id);
    formData.value = {
      ...data
    }
  } else {
    formData.value.dictType = dictCode;
  }
  modalRef.value.handleOpen()
}

const handleSubmit = async () => {
  await formRef.value.validate();
  let data = cloneDeep(formData.value);
  if (data.dictDataId === undefined) {
    await addDictData(data);
    proxy.$modal.okNotify('新增成功');
  } else {
    await updateDictData(data);
    proxy.$modal.okNotify('修改成功');
  }
  resetForm();
  modalRef.value.handleClose();
  emit('success')
}

const resetForm = () => {
  formRef.value?.resetFields();
  formData.value = {
    dictDataId: undefined,
    dictDataSort: 0,
    dictDataName: '',
    dictDataValue: '',
    dictType: '',
    cssClass: '',
    listClass: 'default',
    remark: ''
  }
}

defineExpose({open})
</script>

<template>
  <dialog-form ref="modalRef" :modalTitle="`${formType === 'create' ? '新建' : '编辑'}字典`" modalWidth="500px"
               @submit="handleSubmit">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
      <el-form-item label="字典名称" prop="dictType">
        <el-input v-model="formData.dictType" placeholder="请输入字典名称" disabled/>
      </el-form-item>
      <el-form-item label="数据标签" prop="dictDataName">
        <el-input v-model="formData.dictDataName" placeholder="请输入数据标签"/>
      </el-form-item>
      <el-form-item label="数据键值" prop="dictDataValue">
        <el-input v-model="formData.dictDataValue" placeholder="请输入数据键值"/>
      </el-form-item>
      <el-form-item label="样式属性" prop="cssClass">
        <el-input v-model="formData.cssClass" placeholder="请输入样式属性"/>
      </el-form-item>
      <el-form-item label="显示排序" prop="dictDataSort">
        <el-input-number v-model="formData.dictDataSort" :precision="0" :step="1"/>
      </el-form-item>
      <el-form-item label="回显样式" prop="listClass">
        <el-select v-model="formData.listClass" placeholder="请选择回显样式">
          <el-option
              v-for="item in listClassList"
              :key="item.key"
              :value="item.key"
          >
            <el-text :type="item.key">{{ item.value }}</el-text>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="formData.remark" placeholder="请输入内容"/>
      </el-form-item>
    </el-form>
  </dialog-form>
</template>

<style scoped lang="scss">

</style>
